<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/WEB-INF/tld/iextend-common.tld" prefix="iextend"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><fmt:message key="register.title"/></title>
<link rel="stylesheet" type="text/css" href="<iextend:constant name="ContextPath" />/css/register.css">
<link rel="stylesheet" type="text/css" href="<iextend:constant name="ContextPath" />/js/validform/style.css">
<script type="text/javascript" src="<iextend:constant name="ContextPath" />/js/jquery/jquery-1.6.min.js">
</script>
<script type="text/javascript" src="<iextend:constant name="ContextPath" />/js/validform/Validform_v5.3_min.js">
</script>
</head>

<body onload="init()">
<jsp:include page="../template/navtop.jsp"></jsp:include>
<div class="gb">
  <div class="box">
    <h1><span><a href="#">已有帐号？现在登录</a></span> <fmt:message key="register.title"/></h1>
    <form  class="registerForm" action="<iextend:constant name="ContextPath" />/user/signup" method="post">
      <ul>
      	<li>
          <label class="Validform_label">邮箱:</label>
          <input type="text" class="text" name="email" id="email" 
          ajaxurl="<iextend:constant name="ContextPath" />/user/checkEmail"
          datatype="e" errormsg="邮箱格式不正确" sucmsg="OK"/>
        </li>
        <li>
          <label class="Validform_label">密码:</label>
          <input type="password" class="text" name="password" 
          datatype="*6-16" errormsg="密码应在6-15位字符内" sucmsg="OK"/>
        </li>
        <li>
          <label class="Validform_label">再次输入密码:</label>
          <input type="password" class="text" name="repassword"
          datatype="*" recheck="password" errormsg="两次输入的密码不一致" sucmsg="OK"/>
        </li>
        
        <li>
          <label class="Validform_label">验证码:</label>
          <input type="text" class="text" name="validcode" id="validcode" onblur="checkValidCode(getCheckResult)"/>
          <a href="javascript:;" onclick="refresh()">换一个</a>
          <img src="<iextend:constant name="ContextPath" />/js/images/error.png" id="validcode_error" style="display: none;">
          <img src="<iextend:constant name="ContextPath" />/js/images/right.png" id="validcode_right" style="display: none;">
          <br/>
          <span style="padding-top:5px;padding-left:115px;margin-top:3px;display: block;">
                            输入下图中的字符
          </span>
          <span style="padding-left:115px;display: block;">
          <img onclick="refresh()" border=0 style="margin-top: 3px" width="70px" height="30px;" id="validimg" src="<iextend:constant name="ContextPath" />/jsp/common/validcode.jsp" >
          </span>
        </li>
        <li class="end">
          <input type="submit" class="button" value="提交" />
        </li>
      </ul>
    </form>
  </div>
</div>
<script type="text/javascript">
$(document).ready(function() {
	var vFrom=$(".registerForm").Validform({
		tiptype:3,
		callback:function(form){
			if($("#validcode").val()==null||$("#validcode").val()==''){
				alert('请输入验证码');
				$("#validcode").removeClass("text").addClass("text_error");
				return false;
			}
			if(checkReuslt){
				$("#validcode").removeClass("text_error").addClass("text");
				if(confirm("您确定要提交表单吗？")){
					form[0].submit();
				}
			}
			return false;
		}
	});
	vFrom.tipmsg.c="正在验证邮箱...";
	vFrom.tipmsg.v="请稍后...";
	
});
//验证码刷新
function refresh(){ 
    document.getElementById("validimg").setAttribute("src","<iextend:constant name="ContextPath" />/jsp/common/validcode.jsp?a="+new Date().getTime());
    code='<%=session.getAttribute("validcode")%>';
} 
var checkReuslt=false;
function getCheckResult(result){
	checkReuslt=result;
	return result;
}
//客户端验证码验证
function checkValidCode(getCheckResult){
	if($("#validcode").val()==null||$("#validcode").val()==''){
		getCheckResult(false);
	}else{
		$.getJSON("<iextend:constant name="ContextPath" />/user/checkValidCode",function(code){
			if($("#validcode").val()!=code){
				document.getElementById('validcode_error').style.display='inline';
				document.getElementById('validcode_right').style.display='none';
				$("#validcode").removeClass("text").addClass("text_error");
				getCheckResult(false);
			}else{
				document.getElementById('validcode_right').style.display='inline';
				document.getElementById('validcode_error').style.display='none';
				$("#validcode").removeClass("text_error").addClass("text");
				getCheckResult(true);
			}
		});
	}
}
//页面初始化
function init(){
	$(':input','.registerForm')
	 .not(':button, :submit, :reset, :hidden')
	 .val('')
	 .removeAttr('checked')
	 .removeAttr('selected');
}
</script>
</body>
</html>